<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>知识</title>
    <link rel="shortcut icon" href="#"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" >
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

    </script>
    <style>
        #wrapper{
            position: relative;
        }
        #wrapper #content{
            width: 100%;
        }
        #wrapper #login #sureLogin{
            background-color: #1FA4E9;
        }
        #wrapper #login #account,#password{
            height: 40%;
            width: 95%;
            padding-left: 10px;
            font-size: 15px;
        }
        /*.clear{
            clear: both;
        }
        .tanChuang{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            !*background-color: darkturquoise;
            opacity: 0.6;*!
        }
        .tanChuang .bg{
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.3;
            -moz-opacity: 0.3;
            filter: alpha(opacity=30);
            position: absolute;
            z-index: 9998;
            !*border-radius: 20px;*!
        }
        .tanChuang .wind {
            display: table !important;
            width: 90%;
            position: absolute;
            top: 20%;
            left: 5%;
            z-index: 9999;
        }
        .tanChuang .wind .t_top{
            height: 50px;
            background: linear-gradient(135deg, #0bc2f8, #3583d9);
            color: #FFF;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            border-radius: 20px 20px 0 0;
        }
        .tanChuang .wind .t_cen{
            height: 200px;
            background: #FFF;
            overflow: auto;
            padding: 10px;
        }
        .tanChuang .wind .t_bom{
            height: 50px;
            background: #FFF;
            border-radius: 0 0 20px 20px;
        }
        .tanChuang .wind .t_bom .btn_cancel{
            width: 40%;
            height: 80%;
            float: left;
            background-color: #DBD6D6;
            margin: 0 5% .1rem;
            border-radius: 20px;
            color: #999;
            line-height: 40px;
            text-align: center;
        }
        .tanChuang .wind .t_bom .btn_sure{
            width: 40%;
            height: 80%;
            margin: 0 5% .1rem;
            border-radius: 20px;
            float: left;
            background: linear-gradient(-167deg, #00D2FF 0%, #3A7BD5 100%);
            color: #FFF;
            line-height: 40px;
            text-align: center;
        }
        .tanChuang #close_tc{
            position: absolute;
            width: 20px;
            height: 20px;
            right: 15px;
            top: 13px;
            text-align: center;
            line-height: 20px;
            border: 1px solid cornflowerblue;
            border-radius: 50%;
            z-index: 9999;
        }
        !*.tanChuang *!
        #close_tc,.btn_sure,.btn_cancel:hover{
            cursor: pointer;
         }*/
        @media screen and (min-width: 1000px){
            #wrapper #login{
                width: 25%;
                margin: 0 auto;
                margin-top: 200px;
                height: 300px;
            }
            #wrapper #login .tishi{
                height: 40%;
                line-height: 96px;
                font-size: 20px;
                margin-left: 15%;
            }
            #wrapper #login #sureLogin{
                font-size: 25px;
                width: 20%;
                background-color: #1FA4E9;
            }
        }

        @media screen and (max-width: 1000px){
            .box{
                width: 100px;
                height: 100px;
                margin: 300px auto;
                position: absolute;
                left: 200px;
                transform-style: preserve-3d;
                animation: xuanzhuan 5s infinite linear;
            }
            @keyframes xuanzhuan {
                0%{
                    transform: rotateX(0) rotateY(0) ;
                }
                100%{
                    transform: rotateX(180deg) rotateY(180deg) ;
                }
            }
            .box>div{
                width: 100%;
                height: 100%;
                border: 2px solid #00b3ff;
                border-radius: 50%;
                box-shadow: 0 0 10px blueviolet;
                position: absolute;
                top: 700px;
                left: 0;
            }

            #wrapper #login{
                position: absolute;
                width: 80%;
                top: 150px;
                left: 10%;
                height: 300px;
            }
            /*.tanChuang{
                position: absolute;
                width: 80%;
                top: 150px;
                left: 10%;
                height: 300px;
                border-radius: 20px;
            }*/
            #wrapper #login .tishi{
                height: 40%;
                line-height: 96px;
                font-size: 15px;
                margin-left: 15%;
            }
            #wrapper #login #sureLogin{
                font-size: 20px;
                width: 20%;
            }
            #wrapper #content .to_upload{
                display: block;
                text-align: center;
                margin: 0 auto;
                width: 60%;
                height: 30px;
                border: 1px solid black;
                border-radius: 30%;
            }
            #wrapper #content .contentImg{
                width: 100%;
                border: 1px solid red;
                overflow-y: scroll;
            }
            #wrapper #content .contentImg .imgList{
                /*width: 49%;*/
                border: 1px solid red;
                /*background-color: red;*/
                float: left;
                height: 500px;
            }
        }

    </style>
</head>
<body>
   <div id="wrapper">
       <div id="content" style="display: none;">
           <input class="to_upload" type="button" value="上传">
           <div class="contentImg" style="height: 300px;">
               <div></div>
           </div>
       </div>
<!--       <div class="box"></div>-->


<!--  弹窗  -->
       <!--登录弹窗-->
       <div id="login" style="display: block;">
           <div style="width: 100%; height: 20%; line-height: 60px; text-align: center;">
               <input type="button" value="登录" id="sureLogin">
           </div>
           <div style="width: 100%; height: 80%;">
               <div style="width: 20%;height: 100%; float:left;">
                   <div class="tishi">账号：</div>
                   <div class="tishi">密码：</div>
               </div>
               <div style="width: 79%; height: 100%; float: left;">
                  <div style="height: 40%; width: 100%; line-height: 98px;">
                      <input type="text" placeholder="请输入您的账号" id="account">
                  </div>
                  <div style="height: 40%; width: 100%; line-height: 98px;">
                      <input type="password" placeholder="请输入您的密码" id="password">
                  </div>
               </div>
           </div>
       </div>
       <!--上传文件弹窗-->
       <div class="tanChuang" id="upload" style="display: none;">
           <div class="bg"></div>
           <div class="wind" >
               <div class="t_top">文件上传</div>
               <div id="close_tc">x</div>
               <div class="t_cen">
                   <form id="fileForm"  method="post" enctype="multipart/form-data">
                       <input type="file" name="file" id="file" webkitdirectory>
                   </form>
               </div>
               <div class="t_bom">
                   <div class="btn_cancel">取消</div>
                   <div class="btn_sure">确定</div>
               </div>
           </div>
       </div>
   </div>
</body>
<script>
    init();
    function init(){
        let screenHeight = window.screen.availHeight;
        let contentImgH = screenHeight - 47;
        $(".contentImg").attr('style','height: ' + contentImgH + 'px;');
       /* var box = document.querySelector(".box");
        var boxChild = box.children;
        for (let i=0;i<15;i++){
            box.innerHTML += "<div></div>" ;
            boxChild[i].style.transform = "rotateY("+ 24*i +"deg)";
        }*/
    }
    $("#close_tc").click(function () {
        $("#upload").hide();
    })
    $("#sureLogin").click(function () {
        let account = $("#account").val();
        let password = $("#password").val();
        login(account,password);
    })
    $(".to_upload").click(function () {
        $("#upload").show();
    })

    function login(account,password) {
        $("#login").attr('style','display:none;');
        $("#content").show();
        // sleep(2000);
        initContent();
    }
    function initContent() {
        let screenWidth = window.screen.availWidth;
        if (screenWidth <= 400){
            let num = screenWidth / 200;
            let intNum = parseInt(num);
            let width = 100 / intNum;
            let intWidth = parseInt(width);
            let a = intWidth;
            intWidth --;
            let lastWidth = 0;
            if (width != intWidth){
                lastWidth = 100 - ((intNum - 1) * intWidth) - 4;
            }
            let str = "";
            for (let i = 1; i <= intNum; i++){
                if (i == intNum && width != a){
                    str = str + '<div class="imgList" style="width: ' + lastWidth + '%' + '" id="list' + i + '"></div>';
                }else {
                    str = str + '<div class="imgList" style="width: ' + intWidth + '%' + '" id="list' + i + '"></div>';
                }
            }
            $(".contentImg").html("");
            $(".contentImg").append(str);
        }
    }

    function sleep(n) {
        var start = new Date().getTime();
        //  console.log('休眠前：' + start);
        while (true) {
            if (new Date().getTime() - start > n) {
                break;
            }
        }
    }
</script>
</html>